<template>
    <div class="person">
      <h2>姓名：{{person.name}}</h2>
      <h2>年龄：{{person.age}}</h2>
      <h2>性别：{{person.gender}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeGender">修改性别</button>
    </div>
  </template>

<script setup lang="ts">
import { ref , reactive, toRefs, toRef } from 'vue';


//数据
//创建响应式对象
let person = reactive({name:"张三",age:18,gender:"男"})
//torefs批量取出对象里的name和gender，依然保持响应式的能力
let {name,gender} = toRefs(person)
//toref取出对象里的age  保持响应式的能力
let age = toRef(person,'age')

//方法
function changeName(){
    name.value += "~~"
}
function changeAge(){
    age.value += 1
}

function changeGender(){
    gender.value = "nv"
}





</script>

<style scoped>
.person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>